<template>
  <div>
    <el-container
      style="margin-top: 20px; margin-left: 20px; width: 800px"
      id="printMe"
    >
      <el-header>
        <img
          src="../../assets/logo.png"
          alt=""
          style="height: 30px; margin-top: 20px"
        />
        <h2 style="text-align: center; margin-top: -10px">
          招聘人员基础信息表
        </h2>
      </el-header>
      <el-main>
        <h4>基础信息</h4>
        <el-descriptions class="margin-top" size="medium" :column="2" border>
          <el-descriptions-item
            label="姓名"
            :labelStyle="{
              'text-align': 'center',
              background: '#ffffff',
              color: '#000000',
              'font-weight': 'bold',
              'border-color': '#000000',
            }"
            :contentStyle="{
              'text-align': 'center',
              color: '#000000',
              'border-color': '#000000',
            }"
          >
            {{ form.name }}
          </el-descriptions-item>

          <el-descriptions-item
            label="性别"
            :labelStyle="{
              'text-align': 'center',
              background: '#ffffff',
              color: '#000000',
              'font-weight': 'bold',
              'border-color': '#000000',
            }"
            :contentStyle="{
              'text-align': 'center',
              color: '#000000',
              'border-color': '#000000',
            }"
          >
            {{ form.sex }}
          </el-descriptions-item>

          <el-descriptions-item
            label="年龄"
            :labelStyle="{
              'text-align': 'center',
              background: '#ffffff',
              color: '#000000',
              'font-weight': 'bold',
              'border-color': '#000000',
            }"
            :contentStyle="{
              'text-align': 'center',
              color: '#000000',
              'border-color': '#000000',
            }"
          >
            {{ form.age }}
          </el-descriptions-item>

          <!-- <el-descriptions-item
            label="期望薪酬"
            :labelStyle="{
              'text-align': 'center',
              background: '#ffffff',
              color: '#000000',
              'font-weight': 'bold',
              'border-color': '#000000',
            }"
            :contentStyle="{
              'text-align': 'center',
              color: '#000000',
              'border-color': '#000000',
            }"
          >
            {{ form.salary }}
          </el-descriptions-item> -->

          <el-descriptions-item
            label="应聘职位"
            :labelStyle="{
              'text-align': 'center',
              background: '#ffffff',
              color: '#000000',
              'font-weight': 'bold',
              'border-color': '#000000',
            }"
            :contentStyle="{
              'text-align': 'center',
              color: '#000000',
              'border-color': '#000000',
            }"
          >
            {{ form.post }}
          </el-descriptions-item>

          <el-descriptions-item
            label="应聘部门"
            :labelStyle="{
              'text-align': 'center',
              background: '#ffffff',
              color: '#000000',
              'font-weight': 'bold',
              'border-color': '#000000',
            }"
            :contentStyle="{
              'text-align': 'center',
              color: '#000000',
              'border-color': '#000000',
            }"
          >
            {{ depname }}
          </el-descriptions-item>

          <el-descriptions-item
            label="婚姻状况"
            :labelStyle="{
              'text-align': 'center',
              background: '#ffffff',
              color: '#000000',
              'font-weight': 'bold',
              'border-color': '#000000',
            }"
            :contentStyle="{
              'text-align': 'center',
              color: '#000000',
              'border-color': '#000000',
            }"
          >
            {{ form.marry }}
          </el-descriptions-item>

          <el-descriptions-item
            label="手机"
            :labelStyle="{
              'text-align': 'center',
              background: '#ffffff',
              color: '#000000',
              'font-weight': 'bold',
              'border-color': '#000000',
            }"
            :contentStyle="{
              'text-align': 'center',
              color: '#000000',
              'border-color': '#000000',
            }"
          >
            {{ form.mobile }}
          </el-descriptions-item>

          
          <el-descriptions-item
            label="紧急联系人"
            :labelStyle="{
              'text-align': 'center',
              background: '#ffffff',
              color: '#000000',
              'font-weight': 'bold',
              'border-color': '#000000',
            }"
            :contentStyle="{
              'text-align': 'center',
              color: '#000000',
              'border-color': '#000000',
            }"
          >
            {{ form.ecname }}
          </el-descriptions-item>

          
          <el-descriptions-item
            label="与本人关系"
            :labelStyle="{
              'text-align': 'center',
              background: '#ffffff',
              color: '#000000',
              'font-weight': 'bold',
              'border-color': '#000000',
            }"
            :contentStyle="{
              'text-align': 'center',
              color: '#000000',
              'border-color': '#000000',
            }"
          >
            {{ form.ec }}
          </el-descriptions-item>

          
          <el-descriptions-item
            label="联系人手机"
            :labelStyle="{
              'text-align': 'center',
              background: '#ffffff',
              color: '#000000',
              'font-weight': 'bold',
              'border-color': '#000000',
            }"
            :contentStyle="{
              'text-align': 'center',
              color: '#000000',
              'border-color': '#000000',
            }"
          >
            {{ form.ecmobile }}
          </el-descriptions-item>

          <el-descriptions-item
            :span="2"
            label="籍贯"
            :labelStyle="{
              'text-align': 'center',
              background: '#ffffff',
              color: '#000000',
              'font-weight': 'bold',
              'border-color': '#000000',
            }"
            :contentStyle="{
              'text-align': 'center',
              color: '#000000',
              'border-color': '#000000',
            }"
          >
            {{ form.jiguan }}
          </el-descriptions-item>

          <el-descriptions-item
            label="政治面貌"
            :labelStyle="{
              'text-align': 'center',
              background: '#ffffff',
              color: '#000000',
              'font-weight': 'bold',
              'border-color': '#000000',
            }"
            :contentStyle="{
              'text-align': 'center',
              color: '#000000',
              'border-color': '#000000',
            }"
          >
            {{ form.political }}
          </el-descriptions-item>

          <el-descriptions-item
            label="民族"
            :labelStyle="{
              'text-align': 'center',
              background: '#ffffff',
              color: '#000000',
              'font-weight': 'bold',
              'border-color': '#000000',
            }"
            :contentStyle="{
              'text-align': 'center',
              color: '#000000',
              'border-color': '#000000',
            }"
          >
            {{ form.nation }}
          </el-descriptions-item>

          <el-descriptions-item
            :span="2"
            label="爱好"
            :labelStyle="{
              'text-align': 'center',
              background: '#ffffff',
              color: '#000000',
              'font-weight': 'bold',
              'border-color': '#000000',
            }"
            :contentStyle="{
              'text-align': 'center',
              color: '#000000',
              'border-color': '#000000',
            }"
          >
            {{ form.hobby }}
          </el-descriptions-item>

          <el-descriptions-item
            :span="2"
            label="身份证号"
            :labelStyle="{
              'text-align': 'center',
              background: '#ffffff',
              color: '#000000',
              'font-weight': 'bold',
              'border-color': '#000000',
            }"
            :contentStyle="{
              'text-align': 'center',
              color: '#000000',
              'border-color': '#000000',
            }"
          >
            {{ form.idcardnum }}
          </el-descriptions-item>

          <el-descriptions-item
            label="血型"
            :labelStyle="{
              'text-align': 'center',
              background: '#ffffff',
              color: '#000000',
              'font-weight': 'bold',
              'border-color': '#000000',
            }"
            :contentStyle="{
              'text-align': 'center',
              color: '#000000',
              'border-color': '#000000',
            }"
          >
            {{ form.blood }}
          </el-descriptions-item>

          <el-descriptions-item
            label="身高"
            :labelStyle="{
              'text-align': 'center',
              background: '#ffffff',
              color: '#000000',
              'font-weight': 'bold',
              'border-color': '#000000',
            }"
            :contentStyle="{
              'text-align': 'center',
              color: '#000000',
              'border-color': '#000000',
            }"
          >
            {{ form.tall }}
          </el-descriptions-item>

          <el-descriptions-item
            :span="2"
            label="邮箱"
            :labelStyle="{
              'text-align': 'center',
              background: '#ffffff',
              color: '#000000',
              'font-weight': 'bold',
              'border-color': '#000000',
            }"
            :contentStyle="{
              'text-align': 'center',
              color: '#000000',
              'border-color': '#000000',
            }"
          >
            {{ form.email }}
          </el-descriptions-item>

          <el-descriptions-item
            :span="2"
            label="家庭住址"
            :labelStyle="{
              'text-align': 'center',
              background: '#ffffff',
              color: '#000000',
              'font-weight': 'bold',
              'border-color': '#000000',
            }"
            :contentStyle="{
              'text-align': 'center',
              color: '#000000',
              'border-color': '#000000',
            }"
          >
            {{ form.address }}
          </el-descriptions-item>
        </el-descriptions>

        <h4>教育经历</h4>
        <el-table
          :data="eduexp"
          border
          style="width: 100%; border: 1px solid #000000"
          :header-cell-style="{
            background: '#ffffff',
            color: '#000000',
            borderColor: '#000000',
          }"
          :cell-style="{ color: '#000000', borderColor: '#000000' }"
        >
          <el-table-column
            prop="education"
            label="学历层次"
            header-align="center"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="educationtype"
            label="学历类型"
            header-align="center"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="educationsn"
            label="学历证书编号"
            header-align="center"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="degree"
            label="学位层次"
            header-align="center"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="degreesn"
            label="学位证书编号"
            header-align="center"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="stime"
            label="入学时间"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="etime"
            label="毕业时间"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="学校名称"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="major"
            label="专业"
            header-align="center"
            align="center"
          >
          </el-table-column>
        </el-table>

        <h4>工作经历</h4>
        <el-table
          :data="workexp"
          border
          style="width: 100%; border: 1px solid #000000"
          :header-cell-style="{
            background: '#ffffff',
            color: '#000000',
            borderColor: '#000000',
          }"
          :cell-style="{ color: '#000000', borderColor: '#000000' }"
        >
          <el-table-column
            prop="stime"
            label="入职时间"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="etime"
            label="离职时间"
            header-align="center"
            align="center"
          >
            <template slot-scope="{ row }">
              {{ row.etime == "1000-01-01" ? "至今" : row.etime }}
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="公司名称"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="post"
            label="职位"
            header-align="center"
            align="center"
          >
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <h4>请在下方横线处抄写以下内容：</h4>
        <p>本人已确认以上信息，保证内容真实有效</p>
        <h4>
          ________________________________________________________________________________________
        </h4>
        <h4 style="float: right">面试人员签字：____________________</h4>
      </el-footer>
    </el-container>
  </div>
</template>


<script>
export default {
  data() {
    return {
      form: {},
      depname: "",
      eduexp: [],
      workexp: [],
      userid: "",
    };
  },

  created() {
    this.getUrlKey();
    this.getUserDetail();
  },

  methods: {
    /* 获取地址栏url参数 */
    getUrlKey() {
      var url = window.location.href; //获取当前url
      this.nowurl = url;
      var dz_url = url.split("#")[0]; //获取#/之前的字符串
      var cs = dz_url.split("?")[1]; //获取?之后的参数字符串
      var cs_arr = cs.split("&"); //参数字符串分割为数组
      var cs = {};
      for (var i = 0; i < cs_arr.length; i++) {
        //遍历数组，拿到json对象
        cs[cs_arr[i].split("=")[0]] = cs_arr[i].split("=")[1];
      }
      this.userid = cs.id;
    },

    async getUserDetail() {
      let id = this.userid;
      try {
        let res = await this.$axios.get(`api/member/getuserdetail?id=` + id);
        this.form = res.data.member[0];
        this.eduexp = res.data.eduexp;
        this.workexp = res.data.workexp;
        let dep = await this.$axios.get(
          `api/member/getdepname?id=` + res.data.member[0].depid
        );
        this.depname = dep.data;
      } catch (e) {}
    },
  },
};
</script>

<style>
.my-label {
  background: #000000;
  text-align: "center";
}

.my-content {
  background: #fde2e2;
}
</style>